<template>
	<div class="rank-box-0">
		<div class="rank-box" v-for="item in ranking" :key="item.rank">
			<div class="prize" v-show="item.rank === 1">
				<img src="../../assets/image/icon／金牌.png" alt="">
			</div>
			<div class="prize" v-show="item.rank === 2">
				<img src="../../assets/image/icon／银牌.png" alt="">
			</div>
			<div class="prize" v-show="item.rank === 3">
				<img src="../../assets/image/icon／铜牌.png" alt="">
			</div>
			<div v-show="item.rank > 3" class="rankNum">
				{{item.rank}}
			</div>
			<div class="rankData">
				<div>{{item.name}}</div>
				<div>
					<div class="left">
						<van-progress 
						:percentage="item.percent" 
						:show-pivot="false"
						track-color="white"
						color="#F6C401"
						stroke-width="6px"
						ref='progress'
						/>
					</div>
					<div class="right">
						{{item.num}}
					</div>
				</div>
			</div>
		</div>


	</div>
</template>
 
<script>
	export default {
		props: {
			ranking: {
				type: Array
			},
		},
		data() {
			return {
			}
		},
		methods: {
			async getData() {
				const {data} = await getUserIdData()
				this.$nextTick(() => {
					if(this.$refs.progress) {
						this.$refs.progress.forEach(element => {
							element.resize()
						})
					}
				})
			}
		},
		mounted() {
			this.$nextTick(() => {
				if(this.$refs.progress) {
					this.$refs.progress.forEach(element => {
						element.resize()
					})
				}
			})
			this.getData()
		},
		created() {
			// this.getData()
		}
	}
</script>
 
<style scoped lang="less">
	.prize{
		padding-right: 10px;
	}
	.rank-box-0{

		.rank-box{
			display: flex;
			height: 63px;
			align-items: center;
			// justify-content: center;
			// text-align: center;
			border-bottom: 1px solid #E6E6E6;
			.rankNum{
				flex: 1;
				padding-right: 13px;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				padding-left: 1%;
			}
			.rankData{
				flex: 19;
				div:nth-child(1){
					font-size: 15px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				div:nth-child(2){
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left{
						width: 80%;
					}
					.right{
						font-size: 12px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}
	}
	
</style>